<template>
  <div
    class="zent-loading zent-loading--block zent-loading--has-children"
    data-zv="9.0.0"
    style="height: initial"
  >
    <div class="crm-layout">
      <div class="crm-layout-left">
        <div class="crm-layout-left-title">基础文档</div>

        <el-menu
          router
          default-active="/developmentguide/baseDocument/s1"
          class="el-menu-vertical-demo"
          style="border-right: 0"
        >
          <el-submenu index="1">
            <template slot="title">
              <span>有赞云概况</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/developmentguide/baseDocument/s1">有赞云介绍</el-menu-item>
              <el-menu-item index="/developmentguide/baseDocument/s2">扩展点介绍</el-menu-item>
              <el-menu-item index="/developmentguide/baseDocument/s3">入驻身份说明</el-menu-item>
              <el-menu-item index="/developmentguide/baseDocument/s4">应用类型说明</el-menu-item>
              <el-menu-item index="/#">店铺类型说明</el-menu-item>
              <el-menu-item index="/#">云测试店铺使用指南</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <span>接入流程</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="2-1">
                <template slot="title">
                  <span>无容器接入流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/#">无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">自由型无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">工具型无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">无容器申请并授权测试店铺</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2-2">
                <template slot="title">
                  <span>有容器接入流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/#">有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">自由型有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">工具型有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">有容器申请并授权测试...</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span>数据加密</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="2-1">
                <template slot="title">
                  <span>无容器接入流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/#">无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">自由型无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">工具型无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">无容器申请并授权测试店铺</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2-2">
                <template slot="title">
                  <span>有容器接入流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/#">有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">自由型有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">工具型有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">有容器申请并授权测试店铺</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span>常见问题</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="2-1">
                <template slot="title">
                  <span>无容器接入流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/#">无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">自由型无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">工具型无容器接入流程</el-menu-item>

                  <el-menu-item index="/#">无容器申请并授权测试店铺</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2-2">
                <template slot="title">
                  <span>有容器接入流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/#">有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">自由型有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">工具型有容器接入流程</el-menu-item>

                  <el-menu-item index="/#">有容器申请并授权测试店铺</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="crm-layout-right">
        <div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-submenu__title {
  text-align: left;
}

/deep/.el-menu-item {
  text-align: left;
}

.zent-loading--block {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  position: relative;

  .crm-layout {
    display: flex;
    width: 1200px;
    margin: auto;

    .crm-layout-left {
      display: flex;
      width: 200px;
      flex-direction: column;
      padding-top: 0;
      padding-right: 22px;
      margin-top: 24px;
      border-right: 1px solid #ebedf0;

      .crm-layout-left-title {
        font-weight: 700;
        font-size: 16px;
        height: 46px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ebedf0;
        margin-bottom: 10px;
      }
    }

    .crm-layout-right {
      display: flex;
      flex: 1;
      min-width: 0;
      line-height: 1.4em;
      padding-top: 24px;
      padding-bottom: 20px;
      padding-left: 40px;

      div {
        width: 100%;
      }
    }
  }
}
</style>>
